<template>
  <div class="side-menu-wrapper">
    <slot></slot>
    <Menu
      ref="menu"
      v-show="!collapsed"
      :active-name="activeName"
      :open-names="openedNames"
      :accordion="accordion"
      :theme="theme"
      width="auto"
      @on-select="handleSelect"
    >
    <template v-for="item in menuList">
      <template v-if="item.children && item.children.length>0" >
        <template v-if="item.children.length === 1">
          <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
          <menu-item v-else :name="getNameOrHref(item, true)" :key="`menu-${item.children[0].name}`">
            <common-icon :type="item.children[0].icon || ''" />
            <span>{{ item.children[0].meta.title }}</span>
          </menu-item>
        </template>
        <template v-else>
          <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
          <menu-item v-else :name="getNameOrHref(item)" :key="`menu-${item.name}`">
            <common-icon :type="item.icon || ''" />
            <span>{{ showTitle(item) }}</span>
          </menu-item>
        </template>
      </template>
       <template v-else>
          <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
          <menu-item v-else :name="getNameOrHref(item)" :key="`menu-${item.name}`">
            <common-icon :type="item.icon || ''" />
            <span>{{ showTitle(item) }}</span>
            <span class="Tisnum" v-if="item.name=='order-records'&&sendNum>0">{{sendNum}}</span>
            <span class="Tisnum" v-if="item.name=='after-sales-manage'&&questionNum>0">{{questionNum}}</span>
            <span class="Tisnum" v-if="item.name=='invoice-manage'&&invoiceNum>0">{{invoiceNum}}</span>
          </menu-item>
        </template>
    </template>
    </Menu>
    <div class="menu-collapsed" v-show="collapsed" :list="menuList">
      <template v-for="item in menuList">
        <template v-if="item.children && item.children.length>0">
          <collapsed-menu
            v-if="item.children && item.children.length > 1"
            @on-click="handleSelect"
            hide-title
            :root-icon-size="rootIconSize"
            :icon-size="iconSize"
            :theme="theme"
            :parent-item="item"
            :key="`drop-menu-${item.name}`"
          ></collapsed-menu>
          <Tooltip
            transfer
            v-else
            :content="showTitle(item.children && item.children[0] ? item.children[0] : item)"
            placement="right"
            :key="`drop-menu-${item.name}`"
          >
            <a @click="handleSelect(getNameOrHref(item, true))" class="drop-menu-a" :style="{ textAlign: 'center' }">
              <common-icon
                :size="rootIconSize"
                :color="textColor"
                :type="item.icon || (item.children && item.children[0].icon)"
              />
            </a>
          </Tooltip>
        </template>
       </template>
    </div>
  </div>
</template>
<script>
import {apiPrintOrderOperNum} from '@/api/order-records.js'
import SideMenuItem from './side-menu-item.vue'
import CollapsedMenu from './collapsed-menu.vue'
import { getUnion } from '@/libs/tools'
import mixin from './mixin'

export default {
  name: 'SideMenu',
  mixins: [mixin],
  components: {
    SideMenuItem,
    CollapsedMenu
  },
  props: {
    menuList: {
      type: Array,
      default () {
        return []
      }
    },
    collapsed: {
      type: Boolean
    },
    theme: {
      type: String,
      default: 'dark'
    },
    rootIconSize: {
      type: Number,
      default: 20
    },
    iconSize: {
      type: Number,
      default: 16
    },
    accordion: Boolean,
    activeName: {
      type: String,
      default: ''
    },
    openNames: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      openedNames: [],
      invoiceNum:0,
      questionNum:0,
      sendNum:0,
    }
  },
  methods: {
    handleSelect (name) {
      sessionStorage.removeItem('search')
      this.$emit('on-select', name)
    },
    getOpenedNamesByActiveName (name) {
      return this.$route.matched.map(item => item.name).filter(item => item !== name)
    },
    updateOpenName (name) {
      if (name === this.$config.homeName) this.openedNames = []
      else this.openedNames = this.getOpenedNamesByActiveName(name)
    },
    getPrintOrderOperNum(){
      apiPrintOrderOperNum().then(res=>{
          this.invoiceNum=res.data.invoiceNum
          this.sendNum=res.data.sendNum
          this.questionNum=res.data.questionNum
      })
    },
  },
  mounted(){
    var thta=this
    thta.getPrintOrderOperNum()
    setInterval(() => {
      thta.getPrintOrderOperNum()
    },10000)
  },
  computed: {
    textColor () {
      return this.theme === 'dark' ? '#fff' : '#495060'
    },
    
  },
  watch: {
    activeName (name) {
      if (this.accordion) this.openedNames = this.getOpenedNamesByActiveName(name)
      else this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
    },
    openNames (newNames) {
      this.openedNames = newNames
    },
    openedNames (val) {
      this.$nextTick(() => {
        this.$refs.menu.updateOpened()
      })
    },
    menuList: {
      deep: true,
      immediate: true,
      handler (val) {
        this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
        this.$nextTick(() => {
          this.$refs.menu.updateActiveName()
        })
      }
    }
  }
}
</script>
<style lang="less">
  @import './side-menu.less';
  .Tisnum{
    width: 15px;
    height:15px;
    border-radius: 50%;
    background: #ff0000;
    text-align: center;
    font-size: 12px;
    line-height: 15px;
    display: inline-block;
    margin-left: 5px;
  }
</style>
